<!--
Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

https://www.mall4j.com/

未经允许，不可做商业用途！

版权所有，侵权必究！
-->

<template>
  <view class="Mall4j page-order-detail">
    <view class="order-status">
      <view class="title">
        订单状态：
      </view>
      <view class="text">
        {{ ['','等待买家付款','等待商家发货','等待买家收货','等待买家评价','交易成功','交易失败','商品待成团'][orderInfo.status] }}
      </view>
    </view>
    <view
      v-if="orderInfo.orderMold !== 1 && orderInfo.userAddrOrder"
      class="order-logistics"
    >
      <view class="delivery-info">
        <view class="title">
          配送方式：
        </view>
        <view class="text">
          {{ ['快递配送','快递配送','买家自提','无需快递','同城配送'][orderInfo.dvyType] }}
        </view>
      </view>
      <view class="addr-info">
        <view class="user-info">
          <text
            v-if="orderInfo.dvyType === 2"
            class="self-pick-title"
          >
            提货人：
          </text>
          <text>{{ orderInfo.userAddrOrder.receiver }} {{ orderInfo.userAddrOrder.mobile }}</text>
          <image
            v-if="orderInfo.status <= 2 && orderInfo.dvyType !== 2 && orderInfo.dvyType !== 4 && orderInfo.orderMold !== 1"
            src="/static/images/editor.png"
            class="img-edit"
            @click="addrEditor"
          />
        </view>
        <view
          v-if="orderInfo.dvyType !== 2"
          class="addr"
        >
          {{ `${orderInfo.userAddrOrder.province} ${orderInfo.userAddrOrder.city} ${orderInfo.userAddrOrder.area} ${orderInfo.userAddrOrder.addr}` }}
        </view>
      </view>
    </view>
    <view class="prod">
      <view class="prod-box">
        <view
          v-for="(prodItem, index) in orderInfo.orderItems"
          :key="index"
          class="prod-item"
        >
          <view class="prod-common">
            <view class="prod-img-image">
              <img-show :src="prodItem.pic" />
            </view>
            <view class="prod-info">
              <view class="prod-name-price">
                <view class="name">
                  {{ prodItem.prodName }}
                </view>
                <view class="price">
                  ￥<text class="price-big">
                    {{ parsePrice(prodItem.price)[0] }}
                  </text>{{ '.' + parsePrice(prodItem.price)[1] }}
                </view>
              </view>
              <view class="prod-sku">
                <view
                  v-if="prodItem.skuName"
                  class="sku-name"
                >
                  {{ prodItem.skuName }}
                </view>
                <view class="total">
                  ×{{ prodItem.prodCount }}
                </view>
              </view>
              <view class="prod-stutus">
                <view
                  v-if="orderInfo.orderType !== 0"
                  class="prod-type-item"
                >
                  {{ ['','团购','秒杀'][orderInfo.orderType] }}
                </view>
                <view
                  v-if="prodItem.returnMoneySts && prodItem.returnMoneySts > 0"
                  class="prod-stutus-item"
                >
                  {{ orderStatus[prodItem.returnMoneySts + ''] }}
                </view>
                <view
                  v-if="orderInfo.orderMold === 1"
                  class="prod-type-item"
                >
                  虚拟
                </view>

                <view
                  v-if="util.isAuthorities('admin:orderRefund:update') && orderInfo.refundType === 2 && prodItem.refundId"
                  class="refund-btn"
                  @tap="toRefund(prodItem.refundId)"
                >
                  退款信息
                </view>
              </view>
            </view>
          </view>
          <!-- 赠品：多个商品时展示 -->
          <view v-if="orderInfo.orderItems.length > 1 && prodItem.giveawayList">
            <view
              v-for="giftItem in prodItem.giveawayList"
              :key="giftItem.orderItemId"
              class="prod-gift"
            >
              <text class="name">
                【赠品】{{ giftItem.prodName }}
              </text>
              <text>×{{ giftItem.prodCount }}</text>
            </view>
          </view>
        </view>
        <!-- 赠品：单个商品时展示 -->
        <view v-if="orderInfo.orderItems && orderInfo.orderItems.length === 1 && orderInfo.orderItems[0].giveawayList">
          <view
            v-for="item in orderInfo.orderItems[0].giveawayList"
            :key="item.orderItemId"
            class="prod-item"
          >
            <view class="prod-common">
              <img
                class="prod-img-image"
                :src="util.checkFileUrl(item.pic) || '/static/images/def.png'"
              >
              <view class="prod-info">
                <view class="prod-name-price">
                  <view
                    class="name"
                  >
                    {{ item.prodName }}
                  </view>
                </view>
                <view class="prod-sku">
                  <view
                    v-if="item.skuName"
                    class="sku-name"
                  >
                    {{ item.skuName }}
                  </view>
                  <view class="total">
                    ×{{ item.prodCount }}
                  </view>
                </view>
                <view class="prod-stutus">
                  <view class="prod-type-item">
                    赠品
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="price-detail">
        <text class="title">
          商品总价
        </text>
        <text class="num">
          ￥{{ orderInfo.total }}
        </text>
      </view>
      <view class="price-detail">
        <text class="title">
          运费
        </text>
        <text class="num">
          ￥{{ orderInfo.freightAmount }}
        </text>
      </view>
      <view class="price-detail">
        <text class="title">
          优惠
        </text>
        <text class="num">
          ￥{{ orderInfo.reduceAmount || 0 }}
        </text>
      </view>
      <view class="price-total">
        <text class="text">
          共{{ orderInfo.productNums }}件，实收：
        </text>
        <text
          v-if="orderInfo.actualTotal "
          class="num"
        >
          ￥{{ orderInfo.actualTotal }}
        </text>
        <text
          v-if="orderInfo.actualTotal && orderInfo.score"
          class="num plus"
        >
          +
        </text>
        <text
          v-if="orderInfo.score"
          class="num"
        >
          {{ orderInfo.score }} 积分
        </text>
      </view>
    </view>
    <view class="order-info">
      <view class="order-info-item">
        <text class="title">
          订单编号:
        </text>
        <text class="text">
          {{ orderNumber }}
        </text>
        <view
          class="copy"
          @tap="copy"
        >
          复制
        </view>
      </view>
      <view class="order-info-item">
        <text class="title">
          下单时间:
        </text>
        <text class="text">
          {{ orderInfo.createTime }}
        </text>
      </view>
      <view class="order-info-item">
        <text class="title">
          订单类型:
        </text>
        <text class="text">
          {{ ['普通订单','团购订单','秒杀订单'][orderInfo.orderType] }}
        </text>
      </view>
      <view class="order-info-item">
        <text class="title">
          付款方式:
        </text>
        <text
          v-if="orderInfo.payType === null || orderInfo.status === 1"
          class="text"
        >
          待支付
        </text>
        <text
          v-else
          class="text"
        >
          {{ ['积分支付','微信小程序支付','支付宝PC端支付','微信扫码支付', '微信H5支付', '微信公众号支付','支付宝H5支付','支付宝APP支付', '微信APP支付','用户余额支付','PayPal支付'][orderInfo.payType] }}
        </text>
      </view>
      <view
        v-if="orderInfo.payTime"
        class="order-info-item"
      >
        <text class="title">
          支付时间:
        </text>
        <text class="text">
          {{ orderInfo.payTime }}
        </text>
      </view>
      <view class="order-info-item">
        <text class="title">
          买家昵称:
        </text>
        <text class="text">
          {{ orderInfo.nickName }}
        </text>
      </view>
      <view
        v-if="orderInfo.remarks"
        class="order-info-item"
      >
        <text class="title">
          买家备注:
        </text>
        <text class="text">
          {{ orderInfo.remarks }}
        </text>
      </view>
    </view>
    <view
      v-if="virtualRemarkList.length > 0"
      class="detail"
    >
      <view class="module-title">
        全部留言
      </view>
      <view
        v-for="(item, index) in virtualRemarkList"
        :key="index"
        class="detail-item"
      >
        <view class="detail-item-title">
          {{ item.name }}:
        </view>
        <view class="detail-item-content">
          {{ item.value }}
        </view>
      </view>
    </view>
    <view
      v-if="(util.isAuthorities('admin:orderRefund:update')&&orderInfo.refundStatus && orderInfo.refundType === 1) || (util.isAuthorities('order:delivery:orderItemsDelivery') &&orderInfo.status === 2 && orderInfo.dvyType !== 2)"
      class="order-detail-footer"
    >
      <view
        v-if="util.isAuthorities('admin:orderRefund:update') && orderInfo.refundStatus && orderInfo.refundType === 1"
        class="btn-primary btn"
        @tap="toRefund(orderInfo.orderItems[0].refundId)"
      >
        退款信息
      </view>
      <view
        v-if="util.isAuthorities('order:delivery:orderItemsDelivery') && orderInfo.status === 2"
        class="btn-primary btn"
        @tap="toShip"
      >
        去发货
      </view>
    </view>
  </view>
</template>

<script setup>
import { reactive } from 'vue'
import util from '@/utils/util'

const Data = reactive({
  orderNumber: '',
  orderInfo: {},
  showShadow: false,
  virtualRemarkList: [],
  orderStatus: { 1: '买家申请', 2: '卖家接受', 3: '买家发货', 4: '卖家收货', 5: '退款成功', 6: '买家撤回申请', 7: '商家拒绝', '-1': '退款关闭' }
})

const { orderNumber, orderInfo, virtualRemarkList, orderStatus } = toRefs(Data)

onLoad((options) => {
  Data.orderNumber = options.orderNumber
})

onShow(() => {
  getOrderInfoById()
})

/**
* 获取订单详情
*/
const getOrderInfoById = () => {
  http.request({
    url: `/order/delivery/orderInfo/${Data.orderNumber}`,
    method: 'GET'
  }).then(({ data: res }) => {
    res.orderItems.forEach(x => {
      x.price = util.priceAdd0(x.price)
    })
    res.actualTotal = util.priceAdd0(res.actualTotal)
    res.total = util.priceAdd0(res.total)
    res.freightAmount = util.priceAdd0(res.freightAmount)
    Data.orderInfo = res
    Data.virtualRemarkList = JSON.parse(res.virtualRemark) || []
  })
}

const addrEditor = () => {
  uni.setStorageSync('bbcUserAddrOrder', Data.orderInfo.userAddrOrder)
  uni.navigateTo({
    url: `/package-order/pages/modify-address/modify-address?orderNumber=${Data.orderNumber}&orderId=${Data.orderInfo.orderId}`
  })
}

const toShip = () => {
  uni.removeStorageSync('bbcSelectedDelivery')
  uni.navigateTo({
    url: `/package-order/pages/order-shipping/order-shipping?orderNumber=${Data.orderNumber}`

  })
}

const toRefund = (refundId) => {
  uni.navigateTo({
    url: `/pages/refund-processing/refund-processing?refundId=${refundId}`
  })
}

// 复制文本
const copy = () => {
  util.uniCopy({
    content: Data.orderNumber,
    success: (res) => {
      uni.showToast({
        title: res,
        icon: 'none'
      })
    },
    error: (e) => {
      uni.showToast({
        title: e,
        icon: 'none',
        duration: 3000
      })
    }
  })
}

const parsePrice = (price) => {
  if (price.toString().indexOf('.') > -1) {
    return price.toString().split('.')
  }
  return [price]
}
</script>

<style lang="scss" scoped>
@use "order-detail";
</style>
